function loadData() {
    var activateTab = function(tab) {
        Ext.Ajax.request({ loadMask: true, url: tab.uri, success: loadVis });
    };

    Ext.Ajax.request({
        url: "data/cancerTypes.json",
        method: "GET",
        success: function(o) {
            var json = Ext.util.JSON.decode(o.responseText);
            if (json && json.items) {
                var listeners = [];
                Ext.each(json.items, function(item) {
                    var listener = {
                        title: item.label,
                        uri: item.uri,
                        listeners: {
                            activate: activateTab
                        }
                    };
                    listeners.push(listener);
                });
            }


            var panel = new Ext.TabPanel({
                renderTo: document.body,
                activeTab: 0,
                plain:true,
                enableTabScroll: true,
                resizeTabs: false,
                defaults:{autoScroll: true},
                items:listeners
            });
        }
    })
}

function loadVis(o) {
    var json = Ext.util.JSON.decode(o.responseText);

    var classes = pv.nodes(pv.flatten(json).leaf(Number).array());
    classes.slice(1).forEach(function(d) {
      d.nodeName = d.nodeValue.keys.join(".");
      var i = d.nodeName.lastIndexOf(".");
      d.className = d.nodeName.substring(i + 1) + " (" + d.nodeValue.value + ")";
      d.packageName = d.className;
      d.nodeValue = d.nodeValue.value;
    });

    /* For pretty number formatting. */
    var format = pv.Format.number();

    var vis = new pv.Panel()
        .width(document.body.clientWidth)
        .height(document.body.clientHeight)
	.canvas("ext-gen15");

    vis.add(pv.Layout.Pack)
        .top(-50)
        .bottom(-50)
        .nodes(classes)
        .size(function(d) {return d.nodeValue})
        .spacing(0)
        .order(null)
      .node.add(pv.Dot)
        .fillStyle(pv.Colors.category20().by(function(d) {return d.packageName}))
        .strokeStyle(function() {return this.fillStyle().darker()})
        .visible(function(d) {return d.parentNode})
        .title(function(d) {return d.nodeName + ": " + format(d.nodeValue)})
      .anchor("center").add(pv.Label)

        .text(function(d) {return d.className.substring(0, Math.sqrt(d.nodeValue << 4))});

    vis.render();
}

Ext.onReady(loadData);
